<template>
	<view class="content">
		<navigator url="../downLoad/downLoad">
			<view class="top" @click="toDownLoad">
				下载地址
			</view>
		</navigator>


		<!-- 视频部分 -->
		<view class="shiPin" v-if="type==1">
			<video :src="shiPin_src" controls autoplay="true"></video>
			<p class="shiPin_Title">{{shiPin_title}}</p>
			<view class="shiPin_Content">{{shiPin_content}}</view>
		</view>

		<!-- 图文部分 -->
		<view class="tuWen" v-if="type==2">
			<swiper @change="topSwiperTab" circular="true">
				<swiper-item v-for="name in imgsList">
					<view class="tuWen_tu">
						<image :src="name.materialImage"></image>
					</view>
				</swiper-item>

			</swiper>

			<view class="numDots">
				<text>{{(topSwiperIndex+1)}}/{{(imgsList.length)}}</text>
			</view>

			<view class="tuWen_Wen">
				<p>{{tuWen_title}}</p>
				<text>
					{{tuWen_content}}
				</text>
			</view>
		</view>




		<!-- 底部标签 -->
		<view class="mark">
			<view class="mark_Con">
				<image src="../../imgs/weekday.png" mode=""></image>
				<text>周末宅家</text>
			</view>
			<view class="mark_Con">
				<image src="../../imgs/weekday.png" mode=""></image>
				<text>周末宅家</text>
			</view>
		</view>
		<!-- 编辑 喜欢 -->
		<view class="write_like">
			<view class="write_like_write">
				编辑于 {{time}}
			</view>
			<view class="write_like_like" @click="changeLike">
				<template v-if="likeIs">
					<view class="yes">
						<image src="../../imgs/like.png" mode=""></image>
						<text>喜欢</text>
					</view>
				</template>

				<template v-else>
					<view class="no">
						<image src="../../imgs/noLike.png" mode=""></image>
						<text>不喜欢</text>
					</view>
				</template>


			</view>
		</view>

		<!-- 评论 -->
		<view class="review">
			<view class="line"></view>
			<view class="review_title">
				<view class="num">
					共{{sumNum+1}}条评论
				</view>
			</view>
			<view class="user">
				<view class="user_Img">
					<image :src="userImage" mode=""></image>
				</view>
				<view class="user_other">
					点赞是喜欢，评论是真爱
				</view>
			</view>
			<view class="review_main">
				<!-- 一级评论 -->
				<template v-for="item in evalList_First">
					<span></span> <!-- 这个标签没用 但不可删除 -->
					<evaluate v-if="item.createTime" :tranevacon="item.firstId==0?'widthBig':'widthSmall'"
						:tranuserimg="item.firstId==0?'big':'small'" :trancontent="item"></evaluate>

					<evaluate v-if="item.moreData&&!isMore" v-for="itemTwo in evalList_Second" tranevacon="widthSmall"
						tranuserimg="small" tranreplyis="item.moreSumCount>0?true:false" :trancontent="itemTwo">
					</evaluate>

					<view class="shengyu" v-if="item.moreData">
						<template v-if="isMore"><strong></strong>
							<view class="" @click="changeIsMore">
								<text>—</text>
								<text>展开{{item.moreSumCount-1}}条回复</text>
								<text>▼</text>
							</view>

						</template>
						<template v-else>
							<view class="">
								<view class="loadMoreTwo" v-if="isLoadMore_two" @click="loadMoreData_Two">.....显示更多.....
								</view>
								<view class="loadMore_putAway" @click="changeIsMore">
									<text>收起</text>
									<text>▲</text>
								</view>

							</view>

						</template>
					</view>
				</template>
				
				<!-- 一级列表显示更多 -->
				<view class="oneIsMore" v-if="isMore_one" @click="showMoreOne">
					...显示更多...
				</view>

			</view>
		</view>

		<!-- 底部 -->
		<view class="bottom">
			<navigator url="../downLoad/downLoad">
				<view class="in">
					<image src="../../imgs/write.png" mode=""></image>
					<text>说点什么</text>
				</view>
			</navigator>
			<view class="like">
				<image src="../../imgs/bottom_like.png" mode=""></image>
				<text>{{thumbsUpNumber}}</text>
			</view>
			<view class="collect">
				<image src="../../imgs/collect.png" mode=""></image>
				<text>10万+</text>
			</view>
		</view>

	</view>
</template>

<script>
	import evaluate from "../../common/evaluate.vue";
	export default {
		data() {
			return {
				shiPin_title: "", //视频标题
				shiPin_src: "", //视频链接,
				shiPin_content: "", //视频文字内容
				time: "04-13", //编辑时间
				tuWen_title: "", //图文标题
				tuWen_content: "", //图文内容
				type: 0, //判断 图文 视频
				imgsList: Array, //存储轮播图
				userImage: "", //用户头像链接
				isMore: true, //实现更多数据
				sumNum: 0, //总的评论数
				thumbsUpNumber:0,//点赞量
				isLoadMore_one: false, //一级加载更多
				isLoadMore_two: false, //二级加载更多
				oneLoadNum: 10, //一级已加载的数量
				twoLoadNum: 0, //二级已加载的数量

				pageNum_one: 1, //一级加载更多页面
				pageNum_two: 1, //二级加载更多页面
				// 评论内容
				evalList_First: [], //存储一级评论内容
				evalList_Second: [], //存储二级评论内容
				likeIs: true,
				zanIS: false,
				zanNum: 1,
				topSwiperIndex: 0

			}
		},
		components: {
			evaluate
		},
		onLoad() {
			this.getListTuWen();
			this.getListEvaluate_First(); //获取一级评论内容
			// this.getListEvaluate_Second(); //获取二级评论内容
		},
		methods: {
			// 获取图文内容
			getListTuWen: function() {
				uni.request({
					url: 'https://www.xiaochongshump.com/ugc/api/material/mobile/v1/getMaterialImage',
					data: {
						materialId: 14
					},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							console.log("请求成功", res);
							this.type = res.data.data.typeId;
							this.userImage = res.data.data.userThumbUrl;
							if (res.data.data.typeId == 1) { //视频
								this.shiPin_title = res.data.data.title; //视频标题
								this.shiPin_content = res.data.data.content; //视频链接
								this.shiPin_src = res.data.data.mediaPlayerUrl; //视频链接
								this.time = res.data.data.time;//编辑时间
								this.thumbsUpNumber=res.thumbsUpNumber;//点赞量
								console.log("视频链接:", this.shiPin_src);
							}
							if (res.data.data.typeId == 2) { //图文
								this.tuWen_content = res.data.data.content;
								this.tuWen_title = res.data.data.title;
								this.imgsList = res.data.data.materialImage;
							}

							console.log("视频链接:", this.imgsList);
						}

					},
					fail: res => {
						console.log("请求失败", res)
					}
				})
			},

			// 获取评论内容
			getListEvaluate_First: function() { //获取一级评论
				uni.request({
					url: 'https://www.xiaochongshump.com/ugc/api/material/comment/mobile/v1/list',
					data: {
						firstId: 1,
						materialId: 3,
						pageNum: this.pageNum_one,
						pageSize: 10,
					},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
						
							
							var tempList = new Array();
							tempList = res.data.data;
							
							this.evalList_First = this.evalList_Second.concat(tempList);
							this.oneLoadNum += 10;
							
							if (res.data.totalCount > this.oneLoadNum) {
								this.isLoadMore_one = true; //还有更多的数据需要加载
							
							} else {
								this.isLoadMore_one = false;
							}
							
							for (var i = 0; i < this.evalList_First.length; i++) {
								this.sumNum += this.evalList_First[i].moreSumCount;
							}
							console.log("评论的总条数:", this.sumNum);
						}
					}
				})
			},
			getListEvaluate_Second: function(secondId) { //获取二级评论
				var that = this;
				uni.request({
					url: 'https://www.xiaochongshump.com/ugc/api/material/comment/mobile/v1/secondList',
					data: {
						firstId: 209,
						materialId: 1,
						pageNum: this.pageNum_two,
						pageSize: 10
					},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							var tempList = new Array();
							tempList = res.data.data;
							if (this.pageNum_two == 1)
								delete tempList[0]; //删掉第一个内容防止重复
							
							this.evalList_Second = this.evalList_Second.concat(tempList);
							this.twoLoadNum += 10;
							// console.log("获取二级评论内容:", this.evalList_Second);
							// console.log("当前二级评论已加载的总条数:", this.twoLoadNum);
							// console.log("总的数据条数:", res.data.totalCount);
							if (res.data.totalCount > this.twoLoadNum) {
								this.isLoadMore_two = true; //还有更多的数据需要加载
								console.log("是否需要加载更多数据", this.isLoadMore_two);

							} else {
								this.isLoadMore_two = false;
							}
						}
						console.log("评论请求成功", res);
					}
				})
			},
			//显示更多数据
			
			showMoreOne:function(){//一级评论显示更多
				this.pageNum_one+=1;
				this.getListEvaluate_First();//加载一级评论
			},
			
			changeIsMore: function() {//二级评论展示更多
				console.log("展示更多");
				this.isMore = !this.isMore;
				if (!this.isMore) {
					this.twoLoadNum = 0;
					this.pageNum_two = 1;
					this.evalList_Second.length = 0;
					this.getListEvaluate_Second(); //加载二级评论
				}
			},
			loadMoreData_Two: function() {
				this.pageNum_two += 1;
				this.getListEvaluate_Second();
			},

			topSwiperTab: function(e) { //轮播图显示的页面数
				// var that=this;
				this.topSwiperIndex = Number(e.target.current);
			},

			// changeLike: function() {
			// 	this.likeIs = !this.likeIs;
			// },

			// changeZanTwo: function() {
			// 	if (!this.zanISTwo) {
			// 		this.zanNumTwo++;
			// 		this.zanISTwo = true;
			// 	} else if (this.zanISTwo && this.zanNumTwo > 0) {
			// 		this.zanNumTwo--;
			// 		this.zanISTwo = false;
			// 	}
			// },

		}
	}
</script>

<style>
	@import url("index.css");
</style>
